<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>

    <a-card :border="false">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 3 }" :wrapper-col="{ span: 8 }">
        <a-form-model-item label="背景图" prop="background_pic_url">
          <cyyUploadImg
            imgSizeText=""
            @uploadSuccess="e => (form.background_pic_url = e.data)"
            @deleteImg="form.background_pic_url = ''"
            :imgSrc="form.background_pic_url"
            :showSize="false"
          >
          </cyyUploadImg>
        </a-form-model-item>

        <a-form-model-item label="LOGO" prop="logo_url">
          <cyyUploadImg
            imgSizeText=""
            @uploadSuccess="e => (form.logo_url = e.data)"
            @deleteImg="form.logo_url = ''"
            :imgSrc="form.logo_url"
            :showSize="false"
          >
          </cyyUploadImg>
        </a-form-model-item>

        <a-form-model-item label="卡标题" prop="title">
          <a-input v-model="form.title" placeholder="请输入卡标题" />
        </a-form-model-item>

        <a-form-model-item label="品牌" prop="brand_name">
          <a-input v-model="form.brand_name" placeholder="请输入品牌" />
        </a-form-model-item>

        <a-form-model-item label="服务电话" prop="service_phone">
          <a-input v-model="form.service_phone" placeholder="请输入服务电话" />
        </a-form-model-item>

        <a-form-model-item label="封面摘要" prop="abstract">
          <a-textarea v-model="form.abstract" placeholder="请输入封面摘要" :rows="4" />
        </a-form-model-item>

        <a-form-model-item label="特权说明" prop="prerogative">
          <a-textarea v-model="form.prerogative" placeholder="请输入特权说明" :rows="4" />
          <!-- <div class="tip">
            会员卡特权说明,限制1024汉字。
          </div> -->
        </a-form-model-item>

        <a-form-model-item label="使用说明" prop="description">
          <a-textarea v-model="form.description" placeholder="请输入使用说明" :rows="4" />
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="submitForm" :loading="modalLoading"> 提交 </a-button>
          <a-button style="margin:0 10px" @click="$router.back(-1)" :loading="modalLoading"> 取消 </a-button>
          <a-button v-if="form.card_id" type="danger" @click="remove" :loading="modalLoading"> 删除 </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { wechatMpCardCreate, wechatMpCardList, wechatMpCardUpdate, wechatMpCardDelete } from '@/api/wechartVipCard'
import { cyyUploadImg } from '@/components/CyyUi/index'

export default {
  components: {
    cyyUploadImg
  },

  data() {
    return {
      form: {
        background_pic_url: '',
        logo_url: '',
        title: '',
        brand_name: '',
        service_phone: '',
        abstract: '',
        prerogative: '',
        description: ''
      },

      rules: {
        background_pic_url: [{ required: true, message: '请上传背景图', trigger: 'change' }],
        logo_url: [{ required: true, message: '请上传LOGO', trigger: 'change' }],
        title: [{ required: true, message: '卡标题不能为空', trigger: 'blur' }],
        brand_name: [{ required: true, message: '品牌不能为空', trigger: 'blur' }],
        service_phone: [{ required: true, message: '服务电话不能为空', trigger: 'blur' }],
        abstract: [{ required: true, message: '封面摘要简介不能为空', trigger: 'blur' }],
        prerogative: [{ required: true, message: '特权说明不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '使用说明不能为空', trigger: 'blur' }]
      },

      modalLoading: false
    }
  },

  methods: {
    remove() {
      this.$confirm({
        title: '提示?',
        content: '是否删除？',
        onOk: () => {
          wechatMpCardDelete({
            card_id: this.form.card_id
          })
            .then(res => {
              this.successCallBack(res, () => {
                this.form = {
                  background_pic_url: '',
                  logo_url: '',
                  title: '',
                  brand_name: '',
                  service_phone: '',
                  abstract: '',
                  prerogative: '',
                  description: ''
                }

                this.$refs.ruleForm.resetFields()
              })
            })
            .catch(err => {
              this.errorCallBack(err)
            })
        },
        onCancel: () => {}
      })
    },

    errorCallBack(err) {
      this.$message.error(err.message)
      this.modalLoading = false
    },

    successCallBack(res, fn) {
      this.modalLoading = false

      if (res.code !== 0) {
        this.$error({
          content: res.msg
        })
      } else {
        this.$message.success(res.msg)

        fn && fn()
      }
    },

    // 表单提交
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.modalLoading = true
          let { form } = this

          if (form.card_id) {
            wechatMpCardUpdate(form)
              .then(res => {
                this.successCallBack(res)
              })
              .catch(err => {
                this.errorCallBack(err)
              })
            return
          }

          wechatMpCardCreate(form)
            .then(res => {
              this.successCallBack(res, () => {
                this.getCardInfo()
              })
            })
            .catch(err => {
              this.errorCallBack(err)
            })
        }
      })
    },

    getCardInfo() {
      wechatMpCardList().then(res => {
        if (res.code === 0 && res.data && res.data.list) {
          let { background_pic_url, brand_name, logo_url, title, prerogative, wxRes, card_id } = res.data.list[0],
            { abstract } = wxRes.card.member_card.advanced_info.abstract,
            { service_phone, description } = wxRes.card.member_card.base_info

          this.form = {
            background_pic_url,
            logo_url,
            title,
            brand_name,
            prerogative,
            card_id,
            description,
            service_phone,
            abstract
          }
        }
      })
    }
  },

  mounted() {
    this.getCardInfo()
  }
}
</script>

<style lang="less" scoped>
.title {
  color: #000;
  font-size: 16px;
  margin-bottom: 10px;
}
.tip {
  font-size: 14px;
  color: #8c8c8c;
  display: block;
}
</style>
